<template>
  <div class="app-container">
    <el-row>
      <tree-select
          v-model="value"
          :data="list"
          style="width: 240px"
      ></tree-select>
    </el-row>


<!--    tree2-->

     <el-row style="margin-top: 20px">
        <h4>自定义的树下拉选</h4>
       <el-input
           placeholder="请选择父级"
           v-model="regionLongcode"
           :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
           @click.native="deptogglePanel($event)"
           size="medium"
           readonly="readonly"
       ></el-input>
       <div v-if="showTree" class="treeDiv" ref="suoShuMenTree">
         <el-tree
             :default-expanded-keys="[0, 1]"
             :data="treeData"
             :props="defaultProps"
             accordion
             node-key="id"
             @node-click="handleRegionNodeClick"
         ></el-tree>
       </div>
     </el-row>


  </div>
</template>

<script>
import treeSelect from "./treeSelectCom";
export default {
  components: {
    treeSelect,
  },
  data() {
    return {
      list: [{
        label: '系统',
        id: 1,
        children: [
          { label: '用户', id: 2,children:[{ label: '用户1', id: 222}] },
          { label: '用户组', id: 3 },
          { label: '角色', id: 4 },
          { label: '菜单', id: 5 },
          { label: '组织架构', id: 6 }
        ]
      },
        {
          label: '商品',
          id: 7,
          children: [
            { label: '列表', id: 8 },
            { label: '添加', id: 9 },
            { label: '修改', id: 10 },
            { label: '删除', id: 11 },
            { label: '商品分类', id: 12 },
            { label: '分类修改', id: 13 }
          ]
        }],
      value: 1,

      //tree2
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      showTree: false,
      treeData: [
        {
          label: '系统',
          id: 1,
          children: [
            { label: '用户', id: 2,children:[{ label: '用户1', id: 222}] },
            { label: '用户组', id: 3 },
            { label: '角色', id: 4 },
            { label: '菜单', id: 5 },
            { label: '组织架构', id: 6 }
          ]
        },
        {
          label: '商品',
          id: 7,
          children: [
            { label: '列表', id: 8 },
            { label: '添加', id: 9 },
            { label: '修改', id: 10 },
            { label: '删除', id: 11 },
            { label: '商品分类', id: 12 },
            { label: '分类修改', id: 13 }
          ]
        }
      ],
      regionLongcode: '',
    };
  },
  methods:{
    //  事件
    deptogglePanel (event) {
      event || (event = window.event)
      event.stopPropagation
          ? event.stopPropagation()
          : (event.cancelBubble = true)
      this.showTree ? this.dephide() : this.depshow()
    },
    depshow () {
      this.showTree = true
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephide () {
      this.showTree = false
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephidePanel (e) {
      if (
          this.$refs.suoShuMenTree &&
          !this.$refs.suoShuMenTree.contains(e.target)
      ) {
        this.dephide()
      }
    },
//  点击tree节点
    handleRegionNodeClick (data) {
      console.log("data:",data)
      this.regionLongcode = data.label //所属区域名字
      this.showTree = false
      this.ids= data.id
    },
  }
};
</script>
<style>
/*//  css*/
/*// 这个下拉tree我是写在表单里面，所以相对于el-form-item定位的，可自行修改*/
   .treeDiv{
     position:absolute;
     top:80px;
     left:-1px;
     z-index:1000;
     border: 1px solid #ccc;
     width: 100%;
     border-radius: 6px;
     overflow: hidden;
   }
</style>
